<template>
  <view class="container">
    <view class="search-bar">
    <view class="center">
    	<uni-search-bar @confirm="search" @input="input" cancelButton="none" placeholder="搜索股票名称/代码/简拼"></uni-search-bar>
    </view>
    </view>
    <view class="search-result">
      <view>搜索发现</view>
	  <view style="height: 40rpx; background: #F6F6F6; color: #999999; float: left; font-size: 20rpx; padding: 0 20rpx; border-radius: 100rpx; margin-top: 10rpx;">中海孔库</view>
    </view>
	<view class="search-result">
	  <view>搜索历史</view>
	 <view style="width: 100%; height: 80rpx; float: left; margin-top: 10rpx; border-bottom: 1rpx solid #ccc;">
		 <view style="height: 40rpx; background: #073A87;color: #fff; float: left; font-size: 20rpx; padding: 0 20rpx;border-radius: 100rpx; margin-top: 20rpx;">沪A</view>
		 <view style="width: 40%; float: left; font-size: 20rpx;margin-left: 20rpx;margin-top: 10rpx;">
			 <view>武钢股份</view>
			 <view style="color: #999; font-size: 20rpx;">60005</view>
		 </view>
		 <view style="width:40rpx; height:40rpx; border-radius: 100rpx; border: 1rpx solid #194586; color: #194586; float: right; text-align: center; line-height: 40rpx; margin-top: 10rpx;">+</view>
	 </view>
	</view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      searchQuery: '', // 搜索输入
      results: [] // 搜索结果
    };
  },
  methods: {
    onInput(event) {
      this.searchQuery = event.target.value;
      // 模拟搜索，实际应用中需要从后端或本地数据源获取
      this.results = this.dummySearch(this.searchQuery);
    },
    dummySearch(query) {
      // 模拟搜索，返回包含查询词的结果列表
      return ['结果1', '结果2', '结果3'].filter(result => result.includes(query));
    }
  }
};
</script>
 
<style>
.container {
  padding: 20px;
}
.search-bar{
 width: 90%;
 height: 60rpx;
 float: left;
 margin-left: 5%;
  margin-bottom: 20px;
  border-radius: 100rpx;
}
.search-bar center{
	margin-left: 20rpx;
	height: 100%;
	width: 90%;
	float: left;
}
.search-result {
	width: 100%;
   float: left;
   margin-top: 30rpx;
   font-weight: 600;
}
</style>